<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shine课程表-Web版</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.15.0/popper.min.js" type="module"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/styles/index.css" th:href="@{/styles/index.css}"/>
</head>
<body>
<div class="root">
    <!--上部背景-->
    <div id="bg" th:style="'background:url(' + ${background_url} + '),no-repeat;'"></div>
    <!--顶部栏-->
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<!--        <a href="/index"><img class="navbar-brand" src="../static/images/logo.png" th:src="@{/images/logo.png}" alt=""/></a>-->
        <a href="/index">
            <span class="navbar-brand">Sunshine课程表</span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <!--这块要设置mr-auto，要不登录注册不能居右-->
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="/index" style="color: white;font-weight: bold;margin-right: 16px">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/schedule" style="color: white;font-weight: bold;margin-right: 16px">课表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/function" style="color: white;font-weight: bold">功能</a>
                </li>
            </ul>
            <!--未登录状态-->
            <ul class="navbar-nav my-2 my-lg-0" th:hidden="${login}">
                <li class="nav-item mr-sm-2">
                    <a class="nav-link" href="/login" style="color: white;font-size: small;">注册</a>
                </li>
                <li class="nav-item my-2 my-sm-0">
                    <a class="nav-link" href="/login" style="color: white;font-size: small;">登录</a>
                </li>
            </ul>
            <!--已登录状态-->
            <ul class="navbar-nav my-2 my-lg-0" th:hidden="!${login}">
                <li class="nav-item mr-sm-2">
                    <a class="nav-link" href="#" th:text="${userId}" style="color: white;font-size: small;"></a>
                </li>
                <li class="nav-item my-2 my-sm-0">
                    <a class="nav-link" href="/logout" style="color: white;font-size: small;">注销</a>
                </li>
            </ul>
        </div>
    </nav>
    <!--主布局-->
    <div class="main container-fluid">
        <!--主部分的顶部-->
        <div class="top">
            <!--在界面显示的信息-->
            <div id="weather">
                <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=te&skin=pitaya&color=FFFFFF&fontsize=18&align=center&paddingtop=2" frameborder="0" width="200" height="24" allowtransparency="true"></iframe>
                <!--移动显示的详细天气信息-->
                <div id="weather-info">
                    <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tk&skin=pitaya" frameborder="0" width="260" height="195" allowtransparency="true"></iframe>
                </div>
            </div>

            <div id="today-lesson-div">
                <span id="today-lesson" class="text" th:text="${lesson_info}"></span>
                <!--今日课程详情-->
                <div id="today-lesson-info">

                </div>
            </div>
            <!--今日信息指示-->
            <div id="today-info">
                <span id="today-date" class="text" th:text="'今天是' + ${date}"></span>
                <span id="today-lesson-count" class="text" th:text="${lesson_info}" hidden="hidden"></span>
<!--                <span id="today-weather" class="text" hidden="hidden" th:text="'天气 ' + ${weather.getTem()} + '℃ ' + ${weather.getWea()}"></span>-->
            </div>

            <span class="background-copyright" th:text="${background_info} + ' 背景来源：必应中国'"></span>
        </div>

        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6 introduction-total">
                <span>
                    Shine课程表是一款简洁、轻便的课表程序<br>
                    目前已经覆盖<b>Android</b>和<b>Web</b>两个终端<br><br>
                    Android版支持<b>辽宁大学教务管理、超级课程表、青果、正方、强智、树维</b>等多种通用登录方式和<b>20余所高校</b>的非通用登录<br>
                    Web版现已支持<b>辽宁大学教务管理</b>和<b>超级课程表</b>登录<br>
                </span>
            </div>
            <div class="col-sm-3"></div>
        </div>

        <div class="row introduction-version" style="margin-top: 25px">
            <div class="col-sm-2"></div>
            <div class="col-sm-4 android">
                <a href="https://www.coolapk.com/apk/257158" target="_blank">
                    <div class="card card-lift--hover shadow border-0 p-3 m-1">
                        <img th:src="@{/images/android.webp}" class="card-img absolute top-0" alt="">
                        <span>Android版</span>
                    </div>
                </a>
            </div>
            <div class="col-sm-4 web">
                <a href="index" target="_blank">
                    <div class="card card-lift--hover shadow border-0 p-3 m-1">
                        <img th:src="@{/images/web.webp}" class="card-img absolute top-0" alt="">
                        <span>Web版</span>
                    </div>
                </a>
            </div>
            <div class="col-sm-2"></div>
        </div>

        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6 introduction-linian">
                <span>
                    Shine课程表的理念：<b>纯净、简洁，还原课表本来的样子</b><br>
                    让您在日程安排上同样赏心悦目
                </span>
            </div>
            <div class="col-sm-3"></div>
        </div>

        <div class="row" style="margin-top: 25px">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                    </ul>
                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
                        </div>
                    </div>
                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
            <div class="col-sm-1"></div>
        </div>

        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6 introduction-linian">
                <span>
                    Shine课程表还为您提供了包括<br>
                    <b>成绩查询、疫情打卡</b>等多种实用功能，<br>
                    不定期，Shine课程表还会提供<b>特色活动</b>
                </span>
            </div>
            <div class="col-sm-3"></div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <!--页脚-->
                <div th:include="footer"></div>
            </div>
        </div>

    </div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    window.onload = function () {
        $(function () {
            let count = 0;
            const todayDate = document.getElementById("today-date");
            const todayLesson = document.getElementById("today-lesson-count");
            //const todayWeather = document.getElementById("today-weather");
            setInterval(function () {
                switch (count) {
                    case 0:
                        todayDate.hidden = true;
                        todayLesson.hidden = false;
                        //todayWeather.hidden = true;
                        count = 1;
                        break;
                    case 1:
                        todayDate.hidden = false;
                        todayLesson.hidden = true;
                        //todayWeather.hidden = false;
                        count = 0;
                        break;
                    case 2:
                        todayDate.hidden = false;
                        todayLesson.hidden = true;
                        //todayWeather.hidden = true;
                        count = 0;
                        break;
                }

            }, 3000);

            //监听滚轮变颜色
            const navbar = document.getElementsByClassName('navbar')[0];
            const brand = document.getElementsByClassName('navbar-brand')[0];
            const text = document.getElementsByClassName('nav-link');
            const icon = document.getElementsByClassName('navbar-toggler-icon')[0];

            icon.style.backgroundImage = 'url("data:image/svg+xml,%3csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath stroke=\'rgba(255, 255, 255, 1)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3e%3c/svg%3e")';
            window.onscroll = function() {
                const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//获取页面滚动的距离
                const c = 255 - scrollTop / 700 * 255;
                const o = scrollTop / 700;//透明度的渐变取值

                //navbar.style.backgroundColor = 'rgba(255,255,255,' + o + ')';
                navbar.style.background = 'linear-gradient(90deg, rgba(230, 254, 229,' + o + ') 0%, rgba(220, 231, 255,' + o + ') 100%)';
                brand.style.color = 'rgba(' + c + ',' + c + ',' + c + ',' + '1)';
                for (let i = 0; i<text.length; i++) {
                    text[i].style.color = 'rgba(' + c + ',' + c + ',' + c + ',' + '1)';
                }
                icon.style.backgroundImage = 'url("data:image/svg+xml,%3csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath stroke=\'rgba(' + c + ',' + c + ',' + c + ', 1)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3e%3c/svg%3e")'
            }
        });

        todayLesson();
    };

    function todayLesson() {
        $(function () {
            const todayLessonList = [[${today_lesson}]];
            const container = $('#today-lesson-info');
            for (let i = 0; i<todayLessonList.length; i++) {
                const lesson = $("<div class='today-lesson-item'></div>");
                //随机背景颜色
                const R = Math.round(Math.random() * 255);
                const G = Math.round(Math.random() * 255);
                const B = Math.round(Math.random() * 255);
                lesson.css('background-color', 'rgba(' + R + ',' + G + ',' + B + ',0.75)');
                container.append(lesson);

                const lessonName = $("<span>" + todayLessonList[i].lessonName + "</span><br>");
                lessonName.css("font-size", "20px");
                const time = $("<span>" + "第" + todayLessonList[i].start + "节-第" + todayLessonList[i].end + "节" + "</span><br>");
                time.css("font-size", "15px");
                const info = $("<span>" + todayLessonList[i].location + " | " + todayLessonList[i].teacher + "</span>");
                info.css("font-size", "15px");
                lesson.append(lessonName);
                lesson.append(time);
                lesson.append(info);
            }

        })
    }
</script>
</html>